
//Demo
layui.use(['form','layer'], function() {
    var form = layui.form,
        layer = layui.layer,
        $ = layui.jquery;

 // 生成年份
	for(var i=2020;i>2000;i--){
        var newOption = document.createElement("option");
        newOption.text=i+"年";
        newOption.value=i;
        document.getElementById("year").add(newOption);
      }
	// 生成月份
	for(var i=1;i<=12;i++){
        var newOption = document.createElement("option");
        newOption.text=i+"月";
        newOption.value=i;
        document.getElementById("month").add(newOption);
      }
	// 生成日
	for(var i=1;i<=31;i++){
        var newOption = document.createElement("option");
        newOption.text=i+"日";
        newOption.value=i;
        document.getElementById("day").add(newOption);
      }
	
	// 动态加载车库下拉框内容
	$.ajax({
        url: '/Manage/getParking',
        dataType: 'json',
        type: 'get',
        success: function (data) {
            let str="<option value=''>全部</option>";
            for(let i of data){
                str+='<option value='+i.id+'>'+i.name+'</option>';
            }
            $("#parking").html(str);
            form.render();
            // 重新渲染 固定写法
        }
    });
    
    var incomeData;  // 收入
    

    // 显示停车量图表
    var parkingChart = showParking();

    form.on('submit(searchParking)', function(data){
        
        // 数据
        var newData = data.field;
        console.log(data.field);  

        if(newData.month==""&&newData.day!="")
			layer.msg("请先选择月份");
        else{
	        // 2月
			if(newData.month=="2"&&parseInt(newData.day)>29){
				layer.msg("日期选择错误，请重新选择");
			}else if(newData.month=="4"||newData.month=="6"||
					newData.month=="9"||newData.month=="11"&&parseInt(newData.day)>30){
				layer.msg("日期选择错误，请重新选择");
			}else{
				
	        // 请求停车情况
	        $.ajax({
	        	url : `/statistics/getCarCount?parkingId=${newData.parkingId}&year=${newData.year}&month=${newData.month}&day=${newData.day}`
	            ,type: 'get'
	            ,success: function(result){
	            	
	            	var xName;    // x轴名字
					// 24小时
					if(result.length==24)
						xName = "小时";
					else if(result.length==12)
						xName = "月份";
					else
						xName = "天";				
					
					var xData=new Array();    // x轴坐标
					var yData=new Array();    // y轴坐标
					var sData=new Array();    // 实际内容
					var yMax=0;
					for(var i=0;i<result.length;i++){
						xData[i]=i+1;
						sData[i]=result[i];
						// 找出y轴最大值
						if(yMax<=result[i])
							yMax=result[i];
					}
					yMax = Math.ceil(yMax) ;
					console.log(yMax);
	            	
	                if(result){
	                    // 重新渲染停车折线图
	                    parkingChart.setOption({
	                        xAxis: {
	
	                            // x轴的下标刻度 -- 根据后台传回数据设置
	                        	name: xName,
								data: xData
	                        },
	                        yAxis: {
	                            // y轴的下标刻度 -- 根据后台传回数据设置
	                        	max: yMax
	                        },
	                        // 柱状图每一项对应的值
	                        series: [{
	                        	name : '停车量',
								data : sData // -- 根据后台传回数据设置
	                        }]
	                    });
	
	                }
	                         
	            },error: function(data){
	            	console.log("提交失败");
	            }
	        });
			}
        }

      });
});


// 停车状况折线图1
function showParking() {
    // 基于准备好的dom，初始化echarts实例
    var parkingChart = echarts.init(document.getElementById('line1'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '停车状态分布图',
//            subtext: '纯属虚构'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            name: "时间",
            boundaryGap: false,
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 100,
            name: "停车数/辆",
            axisLabel: {
                formatter: '{value} '
            },
            axisPointer: {
                snap: true
            }
        },
        visualMap: {
            show: false,
            dimension: 0,
            pieces: [{
                lte: 6,
                color: 'green'
            }, {
                gt: 6,
                lte: 8,
                color: 'green'
            }, {
                gt: 8,
                lte: 14,
                color: 'green'
            }, {
                gt: 14,
                lte: 17,
                color: 'green'
            }, {
                gt: 17,
                color: 'green'
            }]
        },
        series: [
            {
                name: '停车量',
                type: 'line',
                smooth: true,
                data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
//                markArea: {
//                    data: [[{
//                        name: '早高峰',
//                        xAxis: '07:30'
//                    }, {
//                        xAxis: '10:00'
//                    }], [{
//                        name: '晚高峰',
//                        xAxis: '17:30'
//                    }, {
//                        xAxis: '21:15'
//                    }]]
//                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    parkingChart.setOption(option);
    
    return parkingChart;
}